<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //作用域  变量或者函数的作用范围
      // 三种作用域1、全局作用域 2、函数作用域(局部作用域)  函数包裹的范围 3、块级作用域（ES6）
      //全局作用域 ：在所有位置都可以获取变量和函数
      //全局变量定义过多 会造成变量污染
      //  var a =10; //全局变量
      // function fn(){ //全局函数
      //     console.log('fn');
      // }
      //   var a = 20
      //   var a = 30    由于a是全局作用域20会被覆盖
      //   function fn(b) {
      //     console.log(b)
      //     // console.log(a);
      //   }
      //   fn(a)

      //局部作用域（函数作用域）
      //   function fn() {
      //     var a = 20;
      //     console.log(a); //20
      //   }
      //   fn();
      //   console.log(a);//error

      // var a =10
      // var a =20 覆盖
      // function fn1() {
      //     var a = 10;
      //      console.log(a); //20
      //    }
      // function fn2(){
      //     var a = 20
      //     console.log(a);
      // }
      // fn1()
      // fn2()

      //三、自执行函数 b 定义一个函数立即执行
      ;(function () {
        //自执行函数 区分作用域
        console.log(111)
        var a = 10
        var b = 20
        c = a + b
        console.log(c)
      })();
      
      (function () {
        //自执行函数 区分作用域
        console.log(111)
        var a = 1
        var b = 2
        c = a + b
        console.log(c)
      })()
      /* 
      1、全局作用域  script 整个内容
      2、局部作用域只会在函数内部有作用
      3、自执行函数  区分独立作用域 防止变量污染
      */
    </script>
  </body>
</html>
